<template>
	<scroll-view scroll-y="true" @refresherrefresh='refresherrefresh'>
		<view class="index_container">
			<view class="index_top">
				<view class="btn" @click="gotoSearch">
					<searchBar @clickBtn="gotoSearch"></searchBar>
				</view>
			</view>
			<view class="index_center">
				<view class="index_center_box">
					<view class="nav_box">
						<view class="nav_box_item" v-for="(item, index) in navList" :key="index">
							<view class="">
								<image :src="item.icon" mode="" class="nav_box_icon"></image>
							</view>
							<view class="nav_box_text">
								{{ item.title }}
							</view>
						</view>
					</view>
					<view class="hot_product">
						<p class="hot_product_title">50% off</p>
						<p class="hot_product_tip">{{ t("index.hotProductTip") }}</p>
						<view class="hot_product_card">
							<view class="card_item" v-for="(item) in cardList" @click="gotoProduct(item)"
								:key="item.id">
								<view>
									<image :src="item.imgUrl" mode="" class="card_item_img"></image>
								</view>
								<view class="card_item_title">
									{{ item.title }}
								</view>
								<view class="card_price">
									{{ item.price }} $
								</view>
								<view class="card_discount">
									<view class="card_discount_left">
										{{ item.discount }}
									</view>
									<view class="card_discount_right">
										{{ t('index.add') }}
									</view>
								</view>

							</view>
						</view>
					</view>
					<view class="intelligent-Selection">
						<view class="intelligent-Selection-title">
							{{t('index.IntelligentSelection')}}
						</view>
						<view class="product-grid">
							<view class="product-card" v-for="(product, index) in products" :key="index"
								@click="gotoProductDetail(product)">
								<view class="product-image">
									<image :src="product.image" mode="aspectFill"></image>
								</view>
								<view class="product-info">
									<view class="commission-info">
										<text>{{t('index.HighCommissions')}} 9%</text>
									</view>

									<view class="earnings">
										<text>Earn 30.240đ-32.850đ</text>
									</view>

								<view class="product-code">
									<text class="product-code">Butterfly & Letter Pattern Blanket, Soft Throw Blanket, Air-conditioned Room Blanket, Warm Nap Blanket for Home Office Travel Camping</text>
								</view>

								<view class="price">
									<text>335.999$</text>
								</view>

									<view class="free-sample-btn">
										<text>{{t('index.FreeSample')}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import searchBar from "../../components/searchBar/index.vue"
	import {
		ref
	} from "vue"
	import {
		useI18n
	} from 'vue-i18n'

	const {
		t
	} = useI18n()
	const navList = ref([{
		title: t("index.nav1"),
		icon: "../../static/home/icon1.png"
	}, {
		title: t("index.nav2"),
		icon: "../../static/home/icon2.png"
	}, {
		title: t("index.nav3"),
		icon: "../../static/home/icon3.png"
	}, {
		title: t("index.nav4"),
		icon: "../../static/home/icon.png"
	}])
	const products = ref([{
			type: 'skincare',
			title: 'Beauty&Personal Care',
			image: '../../static/1.jpg',
			features: [
				'Improves Skin Elasticity',
				'Smoothes Wrinkles',
				'Increases Collagen Stimulation'
			]
		},
		{
			type: 'toothbrush',
			image: '../../static/1.jpg',
			title: '3 PERSONALIZE DMODES'
		},
		{
			type: 'skincare',
			title: 'Beauty&Personal Care',
			image: '../../static/1.jpg',
			features: [
				'Improves Skin Elasticity',
				'Smoothes Wrinkles',
				'Increases Collagen Stimulation'
			]
		},
		{
			type: 'toothbrush',
			image: '../../static/1.jpg',
			title: '3 PERSONALIZE DMODES'
		}
	]);
	const cardList = ref([{
		title: "sdjjfhbsdjfsdkjhfsdjkfhsdkjlksdajfsfsdkjhfsk",
		imgUrl: "../../static/1.jpg",
		price: 100,
		discount: '20% off'
	}, {
		title: t("index.nav2"),
		imgUrl: "../../static/1.jpg",
		price: 100,
		discount: '20%'
	}, {
		title: t("index.nav3"),
		imgUrl: "../../static/1.jpg",
		price: 100,
		discount: '20%'
	}])
	const refresherrefresh = () => {
		console.log('滚动');
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
		uni.showModal({
			title: "滚动"
		})
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	}
	const gotoSearch = () => {
		console.log(gotoSearch, 'gotoSearch');
		uni.navigateTo({
			url: "/pages/searchPage/searchPage"
		})
	}
	const gotoProduct = () => {
		console.log('product');
		uni.navigateTo({
			url: "/pages/product/product"
		})
	}
	const gotoProductDetail = () => {
		console.log('productDetail');
		uni.navigateTo({
			url: "/pages/productDetail/productDetail"
		})
	}
</script>

<style lang="scss">
	$marginHight: 88rpx;
	$topHight: 496rpx;
	$mf: 32rpx;
	$mr: 28rpx;

	.tn-list-item {
		padding: 0 !important;
	}

	.index_container {
		height: 100vh;
		width: 100vw;
		position: relative;
	}

	.index_top {
		padding-top: $marginHight ;
		height: 496rpx;
		width: 100%;
		background: url(../../static/home/home_top.png) no-repeat center center / cover;
		position: absolute;
		z-index: 1;

		.btn {
			margin-left: $mf;
			margin-right: $mr;
		}
	}

	.index_center {
		position: absolute;
		background: url(../../static/home/home_bg.png) no-repeat center center / cover;
		height: 1000rpx;
		margin-top: 320rpx;
		top: $marginHight;
		width: 100%;
	}

	.index_center_box {
		position: absolute;
		z-index: 10 !important;
		top: 132rpx;
		width: 100%;
	}

	.nav_box_icon {
		width: 68rpx;
		height: 68rpx;
	}

	.nav_box {
		display: flex;
		justify-content: space-between;
		margin-left: $mf;
		text-align: center;
		align-items: center;
		margin-right: $mr;

		.nav_box_item {
			flex: 1;
			text-align: center;
			align-items: center;

			.nav_box_text {
				font-size: 24rpx;
			}
		}


	}

	.hot_product {
		background: url(../../static/home/group.png) no-repeat center center / cover;
		margin-top: 40rpx;
		width: 90%;
		height: 405rpx;
		margin-left: $mf;
		margin-right: $mr;

		.hot_product_title {
			font-family: DIN-BlackItalic, DIN-BlackItalic;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 32rpx;
			padding-left: 26rpx;
			padding-top: 18rpx;
		}

		.hot_product_tip {
			padding-left: 182rpx;
			color: #FD2D55;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: bold;
			font-size: 28rpx;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-top: -20rpx;
		}
	}

	.hot_product_card {
		display: flex;
		justify-content: space-around;

	}

	.card_item {
		width: 202rpx;
		height: 298rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-top: 34rpx;
		align-items: center;
		padding: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.card_item_title {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			line-height: 32rpx;
			text-transform: none;
			text-align: left;
			width: 156rpx;
		}

		.card_price {
			width: 156rpx;
			height: 32rpx;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #FD2D55;
			line-height: 32rpx;
			font-style: normal;
			text-transform: none;
			margin: 8rpx 0;
			text-align: left;
		}

		.card_discount {
			width: 178rpx;
			height: 40rpx;
			background: #FD2D55;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			display: flex;

			.card_discount_left {
				width: 102px;
				background-color: #fec0cc;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 20rpx;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				text-align: center;
				align-items: center;
			}

			.card_discount_right {
				width: 76rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				text-align: center;
				opacity: 1;
			}
		}
	}

	.card_item_img {
		width: 166rpx;
		height: 120rpx;
	}

	.intelligent-Selection {
		margin-top: 28rpx;
		margin-bottom: 100rpx;

		.intelligent-Selection-title {
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
			margin-left: $mf;
			margin-right: $mr;
			margin-bottom: 36rpx;
		}
	}

	.product-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		width: 90%;
		margin: auto;
		margin-top: 36rpx;

		.product-item {
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			display: flex;
			padding: 20rpx;

			.product-image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				// margin-right: 12rpx;
			}

			.product-title {
				width: 184rpx;
				height: 64rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				white-space: pre-wrap;
				padding: 0 12rpx;
				box-sizing: border-box;
			}
		}
	}

	.product-card {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.product-image {
			position: relative;
			height: 320rpx;
			background-color: #f0f0f0;

			image {
				width: 100%;
				height: 100%;
			}

			.product-features {
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				font-size: 22rpx;
				color: #333;
				font-weight: 500;

				.feature-item {
					line-height: 1.3;
				}
			}

			.product-title {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				text-align: center;
				color: #fff;
				font-weight: bold;
				font-size: 32rpx;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);

				.title-text {
					line-height: 1.3;
				}
			}
		}

		.product-info {
			padding: 20rpx;

			.commission-info {
				background-color: #fff0f3;
				padding: 6rpx 12rpx;
				border-radius: 6rpx;
				font-size: 22rpx;
				color: #ff4d6a;
				display: inline-block;
				margin-bottom: 10rpx;
			}

			.earnings {
				font-size: 26rpx;
				color: #ff4d6a;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.product-code {
				font-size: 24rpx;
				color: #333;
				margin-bottom: 10rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.price {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 16rpx;
			}

			.free-sample-btn {
				background-color: #ff4d6a;
				color: #fff;
				text-align: center;
				padding: 12rpx 0;
				border-radius: 8rpx;
				font-size: 26rpx;
			}
		}
	}
</style>